<template>
	<view>
		<!-- 轮播 -->
		<swiper autoplay="true">
			<swiper-item v-for="(item,i) in carouselList" :key="i" @click="onDetail(item.goodsId)">
				<image class="swiper-image" :src="item.img" />
			</swiper-item>
		</swiper>

		<!-- 首页功能快捷入口 Grid宫格-->
		<view style="padding: 10px 0;">

			<uni-grid :column="4" :showBorder="false" @change="onChange">
				<uni-grid-item v-for="(item, i) in homeItems" :index="i" :key="i">
					<view class="grid-item-box">
						<image :src="item.img" class="grid-image" mode="aspectFill" />
						<text class="grid-text">{{ item.title }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>

		</view>

		<!-- 首页推荐 -->
		<home-goods :goodsList="recommendGoodsList" title="首页推荐"></home-goods>

		<!-- 首页新品 -->
		<home-goods :goodsList="newGoodsList" title="首页新品"></home-goods>

		<!-- 首页热销 -->
		<home-goods :goodsList="hotGoodsList" title="首页热销"></home-goods>



		<!-- 首页新品 -->
		<!-- <view class="goods-block">
			<view class="title">
				<uni-icons type="list"></uni-icons>
				<text>首页新品</text>
			</view>
			<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
				<view style="width:calc(100%/3);" v-for="(item,i) in newGoodsList" :key="i" @click="onDetail(item.goodsId)">
					<image :src=" item.goodsImg" style="width: 100%; height:100px;" mode="aspectFit"></image>
					<view class="goods-name">{{item.goodsName}}</view>
					<view class="goods-price">￥{{item.goodsPrice.toFixed(2)}}</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	//导入封装的接口
	import { getHomeData } from "@/api/home.js"
	import homeGoods from "./components/homeGoods.vue"
	export default {
		components: {
			homeGoods
		},
		data() {
			return {
				carouselList: [],
				recommendGoodsList: [], //商品推荐
				hotGoodsList: [], //首页热销商品
				newGoodsList: [], //首页新品
				//首页快捷功能入口
				homeItems: [{
						title: '新闻资讯',
						routePath: '/pages/working/working',
						img: '/static/image/menu1.png'
					},
					{
						title: '图片分享',
						routePath: '/pages/working/working',
						img: '/static/image/menu2.png'
					},
					{
						title: '商品购买',
						routePath: '/pages/working/working',
						img: '/static/image/menu3.png'
					},
					{
						title: '留言反馈',
						routePath: '/pages/working/working',
						img: '/static/image/menu4.png'
					},
					{
						title: '视频专区',
						routePath: '/pages/working/working',
						img: '/static/image/menu5.png'
					},
					{
						title: '联系我们',
						routePath: '/pages/working/working',
						img: '/static/image/menu6.png'
					}
				],
			}
		},
		// 生命周期
		onLoad() {
			//发起网络请求 http://www.zjff495.cn:5058/app/v1/home/index
			//调用封装的首页接口
			getHomeData().then(result => {
				console.log(result)
				this.carouselList = result.data.carouselList
				this.recommendGoodsList = result.data.recommendGoodsList
				this.hotGoodsList = result.data.hotGoodsList
				this.newGoodsList = result.data.newGoodsList
			}).finally(() => {
				uni.hideLoading();
			})

		},
		methods: {
			onChange(e) {
				let index = e.detail.index;
				//路由跳转到首页
				uni.navigateTo({
					url: this.homeItems[index].routePath
				});
			},
			onDetail(goodsId) {
				uni.navigateTo({
					url: `/pages/goods/goodsDetail?goodsId=${goodsId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.grid-text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-image {
		width: 50rpx;
		height: 50rpx;
	}
</style>